<template>
  <view class="content">
    <view class="container">
      <view class="title">兑换成功</view>
      <view class="subtitle">微信银行卡红包</view>
      <view class="content-container">
        <text class="content-text">红包已存入您的微信卡包-券和礼品卡里面</text>
        <text class="content-text">支付时自动抵扣</text>
        <text class="content-text">如有使用问题，请咨询<text class="phone-number" @click="handleCall">400-8381086</text></text>
        <text class="content-text">或搜索微信公众号"优享好礼汇"联系我们</text>
      </view>
      <!-- <view class="back-btn" @click="handleBack">返回</view> -->
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: '400-8381086'
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  overflow: hidden;
}

.content {
  min-height: 100vh;
  height: 100vh;
  background-image: url('/static/background1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  position: relative;
}

.container {
  width: 100%;
  height: calc(100% - var(--status-bar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  box-sizing: border-box;
  position: relative;
}

.title {
  font-family: ZiZhiQuXiMaiTi !important;
  font-size: 72rpx;
  color: #FFFFFF;
  margin: 60rpx 0 30rpx;
  font-weight: normal;
  text-align: center;
}

.subtitle {
  font-size: 36rpx;
  color: #FFFFFF;
  margin-bottom: 60rpx;
  text-align: center;
}

.content-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 20rpx;
}

.content-text:last-child {
  margin-bottom: 0;
}

.back-btn {
  width: 620rpx;
  height: 100rpx;
  background: #FF6B35;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 36rpx;
  margin-top: auto;
  margin-bottom: 60rpx;
}

.phone-number {
  color: #FF6B35;
  text-decoration: underline;
}
</style> 